<template>
  <div class="demo">
    <image-magnifier :src="smallImgSrc"
      :zoom-src="bigImgSrc"
      width="400"
      height="400"
      zoom-width="400"
      zoom-height="400"
      :delay-in="300" />
  </div>
</template>

<script>
import ImageMagnifier from '@/components/ImageMagnifier.vue'
export default {
  name: 'Demo',
  components: {
    ImageMagnifier
  },
  data () {
    return {
      smallImgSrc: 'https://img.zydmall.com/public/images/97/be/ed/404f172b83059dc2ab348c10806ee8e5ee9a3226.jpg',
      bigImgSrc: 'https://img.zydmall.com/public/images/b3/ce/c5/ecf4634f692db1f7feba89fed9920460aee60bbf.jpg'
    }
  }
}
</script>

<style lang="scss" scoped>
.demo{
  width: 400px;
  height: 400px;
  border: 1px solid #0d9b9d;
}
</style>
